<extend name="Base/common"/>

<block name="header">
    <header class="jumbotron subhead" id="overview">
        <div class="container">
            <h2>源自相同起点，演绎不同精彩！</h2>
            <p class="lead"></p>
        </div>
    </header>
</block>

<block name="side">
    <!-- 左侧 nav
    ================================================== -->
    <!--<div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
            {:W('Category/lists', array(39, true))}
        </ul>
    </div>-->
</block>

<block name="body">
    <div id="search_div">
        <div class="search_content">
            <div class="search_box">
                <input type="search" class="search_input" placeholder="请输入搜索内容,以便查询设备的维修信息！" value=""/>
            </div>
            <div class="search_select">
                <span>手机号码</span>
                <ul class="dropdown">
                    <li>手机号码</li>
                    <li>客户姓名</li>
                </ul>
            </div>
            <a href="javascript:;" class="search_btn">搜索</a>
        </div>
    </div>
    <div style="width: 100%;padding: 20px 20%;box-sizing: border-box;">
        <table width="100%" border="1">
            <tr>
                <th>客户姓名</th>
                <th>狄鑫</th>
            </tr>
            <tr>
                <th>设备型号</th>
                <th>iphone6s</th>
            </tr>
            <tr>
                <th>维修进程</th>
                <th>已完成维修</th>
            </tr>
            <tr>
                <th>维修价格</th>
                <th>￥400</th>
            </tr>
            <tr>
                <th>已付定金</th>
                <th>￥100</th>
            </tr>
            <tr>
                <th>到店应付</th>
                <th>￥300</th>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            function DropDown(el) {
                this.dd = el;
                this.span = this.dd.children('span');
                this.li = this.dd.find('ul.dropdown li');
                this.val = '';
            }
            DropDown.prototype.initEvents = function() {
                var obj = this;
                obj.dd.on('click', function(event) {
                    $(this).toggleClass('active').siblings().removeClass('active');
                    event.stopPropagation();
                });
                obj.li.on('click', function() {
                    var opt = $(this);
                    obj.val = opt.html();
                    if(obj.span.html() == obj.val) return;
                    obj.span.html(obj.val);
                    $(document).click(function() {
                        $('.search_select').removeClass('active');
                    });
                })
            }
            var select = new DropDown($('.search_select'));
            select.initEvents();
        }
    </script>
</block>